
<template>
  <div>
    <!--搜索框-->
    <el-form ref="menuFormRef" :model="menuForm" :inline="true" size="small">
      <el-form-item>
        <el-button type="primary" @click="selectList">刷新</el-button>

        <el-button type="primary" @click="add">新增</el-button>

        <el-button type="primary" @click="cleanCache">清理缓存</el-button>
      </el-form-item>
    </el-form>
    <div class="flex-div">
      <!--菜单表单-->
      <div style="width: 70%">
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="menuId"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <!--表单展示--->
          <el-table-column prop="menuName" label="菜单名称" width="200px;" />
          <el-table-column label="菜单类型">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.menuType == 0"
                >目录</el-tag
              >
              <el-tag type="info" v-if="scope.row.menuType == 1">页面</el-tag>
              <el-tag type="warning" v-if="scope.row.menuType == 2"
                >按钮</el-tag
              >
            </template>
          </el-table-column>
           <el-table-column label="是否显示">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.showType == 0&&scope.row.menuType !== 2"
                >显示</el-tag>
              <el-tag type="info" v-if="scope.row.showType == 1&&scope.row.menuType !== 2">隐藏</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="权限编码" />
          <el-table-column prop="path" label="路由" />
          <el-table-column prop="sortNum" label="排序" />

          <!--表单操作-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--添加子节点-->
              <el-tooltip
                class="item"
                effect="dark"
                content="添加子节点"
                placement="top"
              >
                <i
                  class="el-icon-folder-add operationIcon"
                  v-if="scope.row.menuType != 2"
                  @click="addChild(scope.row.menuId, scope.row.menuType)"
                ></i>
              </el-tooltip>
              <!--添加操作资源-->
              <el-tooltip
                class="item"
                effect="dark"
                content="添加资源"
                placement="top"
              >
                <i
                  class="el-icon-document-add operationIcon"
                  v-if="scope.row.menuType == 2"
                  @click="addOperation(scope.row.menuId)"
                ></i>
              </el-tooltip>

              <!--查看操作资源-->
              <el-tooltip
                class="item"
                effect="dark"
                content="查看资源"
                placement="top"
              >
                <i
                  class="el-icon-document operationIcon"
                  v-if="scope.row.menuType == 2"
                  @click="selectOperationList(scope.row.menuId)"
                ></i>
              </el-tooltip>

              <!--编辑节点-->
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑节点"
                placement="top"
              >
                <i
                  class="el-icon-edit operationIcon"
                  @click="edit(scope.row.menuId)"
                ></i>
              </el-tooltip>
              <!--删除节点-->
              <el-tooltip
                class="item"
                effect="dark"
                content="删除节点"
                placement="top"
              >
                <i
                  class="el-icon-delete operationIcon"
                  v-if="!scope.row.hasChild"
                  @click="deleteRow(scope.row.menuId)"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="width: 30%">
        <!--操作资源表单-->
        <el-table
          v-loading="loading"
          :data="tableOperationData"
          border
          style="width: 100%"
          size="small"
        >
          <!--表单展示--->
          <el-table-column prop="operationName" label="资源名称" />

          <!--表单操作-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--编辑节点-->
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
              >
                <i
                  class="el-icon-edit operationIcon"
                  @click="editOperation(scope.row.operationId)"
                ></i>
              </el-tooltip>
              <!--删除节点-->
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <i
                  class="el-icon-delete operationIcon"
                  @click="deleteOperationRow(scope.row.operationId)"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!--新增菜单弹窗-->
    <el-dialog
      title="新增菜单"
      :visible.sync="addMenuDialog"
      :close-on-click-modal="false"
      width="800px"
    >
      <el-form
        ref="addMenuFormRef"
        :model="addMenuForm"
        :rules="addMenuFormRules"
        size="small"
        label-width="200px"
      >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            v-model="addMenuForm.menuName"
            type="menuName"
            placeholder="请填写菜单名称"
          />
        </el-form-item>

        <el-form-item label="菜单类型">
          <el-select
            v-model="addMenuForm.menuType"
            placeholder="请选择菜单类型"
            @change="handleChangeMenuType"
            :disabled="menuTypeDisableed"
          >
            <el-option
              v-for="item in addMenuFormData.menuTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示" v-if="addMenuForm.menuType == 1">
          <el-select v-model="addMenuForm.showType" placeholder="请选择">
            <el-option
              v-for="item in addMenuFormData.showTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="图标" prop="icon" v-if="addMenuForm.menuType != 2">
          <el-input
            v-model="addMenuForm.icon"
            type="path"
            placeholder="请填写图标"
          />
        </el-form-item>
        <el-form-item label="路由" prop="path" v-if="addMenuForm.menuType != 2">
          <el-input
            v-model="addMenuForm.path"
            type="path"
            placeholder="请填写路由,例如：user"
          />
        </el-form-item>
        <el-form-item
          label="组件地址"
          prop="component"
          v-if="addMenuForm.menuType == 1"
        >
          <el-input
            v-model="addMenuForm.component"
            type="path"
            placeholder="请填写组件地址,例如：system/user/index"
          />
        </el-form-item>

        <el-form-item label="权限编码" prop="code">
          <el-input
            v-model="addMenuForm.code"
            type="code"
            placeholder="请填写权限编码"
          />
        </el-form-item>

        <el-form-item label="排序,默认为0" prop="sortNum">
          <el-input-number
            v-model="addMenuForm.sortNum"
            :min="0"
            :max="2000"
            label="请填写排序,默认为0"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="addResetMenuForm()">取消</el-button>
        <el-button
          v-loading="btnLoad"
          size="medium"
          type="primary"
          @click="addMenuSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>

    <!--编辑菜单弹窗-->
    <el-dialog
      title="编辑菜单"
      :visible.sync="editMenuDialog"
      :close-on-click-modal="false"
      width="800px"
    >
      <el-form
        ref="editMenuFormRef"
        :model="editMenuForm"
        :rules="editMenuFormRules"
        size="small"
        label-width="250px"
      >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            v-model="editMenuForm.menuName"
            type="menuName"
            placeholder="请填写菜单名称"
          />
        </el-form-item>

        <el-form-item label="菜单类型">
          <el-select
            v-model="editMenuForm.menuType"
            placeholder="请选择菜单类型"
            @change="handleChangeMenuType"
            :disabled="menuTypeDisableed"
          >
            <el-option
              v-for="item in editMenuFormData.menuTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示" v-if="editMenuForm.menuType == 1">
          <el-select v-model="editMenuForm.showType" placeholder="请选择">
            <el-option
              v-for="item in editMenuFormData.showTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="图标"
          prop="icon"
          v-if="editMenuForm.menuType != 2"
        >
          <el-input
            v-model="editMenuForm.icon"
            type="path"
            placeholder="请填写图标"
          />
        </el-form-item>
        <el-form-item
          label="路由"
          prop="path"
          v-if="editMenuForm.menuType != 2"
        >
          <el-input
            v-model="editMenuForm.path"
            type="path"
            placeholder="请填写路由,例如：user"
          />
        </el-form-item>
        <el-form-item
          label="组件地址"
          prop="component"
          v-if="editMenuForm.menuType == 1"
        >
          <el-input
            v-model="editMenuForm.component"
            type="path"
            placeholder="请填写组件地址,例如：system/user/index"
          />
        </el-form-item>
        <el-form-item label="权限编码" prop="code">
          <el-input
            v-model="editMenuForm.code"
            type="code"
            placeholder="请填写权限编码"
          />
        </el-form-item>

        <el-form-item label="排序,默认为0" prop="sortNum">
          <el-input-number
            v-model="editMenuForm.sortNum"
            :min="0"
            :max="2000"
            label="请填写排序,默认为0"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editResetMenuForm()">取消</el-button>
        <el-button
          v-loading="btnLoad"
          size="medium"
          type="primary"
          @click="editMenuSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>

    <!--新增资源弹窗-->
    <el-dialog
      title="新增资源"
      :visible.sync="addOperationDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form
        ref="addOperationFormRef"
        :model="addOperationForm"
        :rules="addOperationFormRules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="操作名称" prop="operationName">
          <el-input
            v-model="addOperationForm.operationName"
            type="operationName"
            placeholder="请填写操作名称"
          />
        </el-form-item>

        <el-form-item label="地址" prop="path">
          <el-input
            v-model="addOperationForm.path"
            type="path"
            placeholder="请填写地址"
          />
        </el-form-item>

        <el-form-item label="返回结构" prop="resultStruct">
          <el-input
            v-model="addOperationForm.resultStruct"
            type="resultStruct"
            placeholder="请填写返回结构"
          />
        </el-form-item>

        <el-form-item label="类名" prop="className">
          <el-input
            v-model="addOperationForm.className"
            type="className"
            placeholder="请填写类名"
          />
        </el-form-item>

        <el-form-item label="权限编码" prop="code">
          <el-input
            v-model="addOperationForm.code"
            type="code"
            placeholder="请填写权限编码"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="addResetOperationForm()"
          >取消</el-button
        >
        <el-button
          v-loading="btnLoad"
          size="medium"
          type="primary"
          @click="addOperationSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>

    <!--编辑资源弹窗-->
    <el-dialog
      title="编辑资源"
      :visible.sync="editOperationDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form
        ref="editOperationFormRef"
        :model="editOperationForm"
        :rules="editOperationFormRules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="操作名称" prop="operationName">
          <el-input
            v-model="editOperationForm.operationName"
            type="operationName"
            placeholder="请填写操作名称"
          />
        </el-form-item>

        <el-form-item label="地址" prop="path">
          <el-input
            v-model="editOperationForm.path"
            type="path"
            placeholder="请填写地址"
          />
        </el-form-item>

        <el-form-item label="返回结构" prop="resultStruct">
          <el-input
            v-model="editOperationForm.resultStruct"
            type="resultStruct"
            placeholder="请填写返回结构"
          />
        </el-form-item>

        <el-form-item label="类名" prop="className">
          <el-input
            v-model="editOperationForm.className"
            type="className"
            placeholder="请填写类名"
          />
        </el-form-item>

        <el-form-item label="权限编码" prop="code">
          <el-input
            v-model="editOperationForm.code"
            type="code"
            placeholder="请填写权限编码"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editResetOperationForm()"
          >取消</el-button
        >
        <el-button
          v-loading="btnLoad"
          size="medium"
          type="primary"
          @click="editOperationSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addMenu,
  menuList,
  viewMenu,
  editMenu,
  deleteMenu,
  addOperation,
  operationList,
  viewOperation,
  editOperation,
  deleteOperation,
  cleanMenuRelationCache,
} from "@/api/menu";
import { Message } from "element-ui";

export default {
  data() {
    return {
      menuForm: {
        pageSize: 1,
        pageNum: 10,
      },
      tableData: [],
      tableOperationData: [],
      menuTypeDisableed: false,
      //新增弹窗逻辑
      addMenuDialog: false,
      addMenuForm: {
        menuName: "",
        parentId: 0,
        sortNum: "",
        path: "",
        component: "",
        icon: "",
        menuType: 0,
        code: "",
        showType: 0,
      },
      //添加弹窗数据源存放
      addMenuFormData: {
        menuTypeOptions: [
          {
            value: 0,
            label: "目录",
          },
          {
            value: 1,
            label: "页面",
          },
          {
            value: 2,
            label: "按钮",
          },
        ],
        showTypeOptions: [
          {
            value: 0,
            label: "显示",
          },
          {
            value: 1,
            label: "隐藏",
          },
        ],
      },
      addMenuFormRules: {
        menuName: [{ required: true, trigger: "blur" }],
        parentId: [{ required: true, trigger: "blur" }],
        sortNum: [{ required: true, trigger: "blur" }],
        menuType: [{ required: true, trigger: "blur" }],
        code: [{ required: true, trigger: "blur" }],
      },
      //编辑弹窗逻辑
      editMenuDialog: false,
      editMenuForm: {
        menuId: 0,
        menuName: "",
        parentId: "",
        sortNum: "",
        path: "",
        component: "",
        icon: "",
        menuType: 0,
        code: "",
        showType: 0,
      },
      //编辑弹窗数据源存放
      editMenuFormData: {
        menuTypeOptions: [
          {
            value: 0,
            label: "目录",
          },
          {
            value: 1,
            label: "页面",
          },
          {
            value: 2,
            label: "按钮",
          },
        ],
        showTypeOptions: [
          {
            value: 0,
            label: "显示",
          },
          {
            value: 1,
            label: "隐藏",
          },
        ],
      },
      editMenuFormRules: {
        menuName: [{ required: true, trigger: "blur" }],
        parentId: [{ required: true, trigger: "blur" }],
        sortNum: [{ required: true, trigger: "blur" }],
        menuType: [{ required: true, trigger: "blur" }],
        code: [{ required: true, trigger: "blur" }],
      },
      //新增弹窗逻辑
      addOperationDialog: false,
      addOperationForm: {
        menuId: 0,
        operationName: "",
        path: "",
        resultStruct: "",
        className: "",
        code: "",
      },
      //添加弹窗数据源存放
      addOperationFormData: {},
      addOperationFormRules: {
        menuId: [{ required: true, trigger: "blur" }],
        operationName: [{ required: true, trigger: "blur" }],
        path: [{ required: true, trigger: "blur" }],
        resultStruct: [{ required: true, trigger: "blur" }],
        code: [{ required: true, trigger: "blur" }],
      },
      //编辑弹窗逻辑
      editOperationDialog: false,
      editOperationForm: {
        operationId: 0,
        menuId: 0,
        operationName: "",
        path: "",
        resultStruct: "",
        className: "",
        code: "",
      },
      //编辑弹窗数据源存放
      editOperationFormData: {},
      editOperationFormRules: {
        menuId: [{ required: true, trigger: "blur" }],
        operationName: [{ required: true, trigger: "blur" }],
        path: [{ required: true, trigger: "blur" }],
        resultStruct: [{ required: true, trigger: "blur" }],
        code: [{ required: true, trigger: "blur" }],
      },
      btnLoad: false,
      loading: false,
      pageSizes: [5, 10, 20, 30, 50],
      pageSize: 10,
      pageNo: 1,
      total: 0,
    };
  },
  mounted() {
    this.selectList();
    this.tableOperationData = [];
  },
  methods: {
    // 初始化数据
    selectList() {
      this.loading = true;
      this.tableData = [];
      const params = { pageNum: this.pageNo, pageSize: this.pageSize };
      menuList(params)
        .then((response) => {
          this.tableData = response.data.rows;
          this.total = 100;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleChangeMenuType() {},
    //新增逻辑
    add() {
      this.addResetMenuFormInit();
      this.addMenuDialog = true;
      this.menuTypeDisableed = false;
      this.dialogMenuName = "无";
    },
    //新增下级节点
    addChild(id, type) {
      this.addResetMenuFormInit();
      //如果上级节点为类型则下级只能添加资源文件目录
      this.menuTypeDisableed = false;
      if (type == 1) {
        this.addMenuForm.menuType = 2;
        this.menuTypeDisableed = true;
      }

      this.addMenuForm.parentId = id;
      this.addMenuDialog = true;
    },
    // 新增重置表单
    addResetMenuForm() {
      this.addMenuDialog = false;
    },
    //初始化添加选项框值
    addResetMenuFormInit() {
      this.addMenuForm = {
        menuName: "",
        parentId: 0,
        sortNum: "",
        path: "",
        component: "",
        icon: "",
        menuType: 0,
        code: "",
      };
    },
    // 提交菜单新增或编辑请求
    addMenuSubmit() {
      this.$refs.addMenuFormRef.validate((valid) => {
        if (valid) {
          this.btnLoad = true;
          // 新增菜单
          addMenu(this.addMenuForm)
            .then((response) => {
              this.btnLoad = false;
              this.addResetMenuForm();
              this.selectList();
            })
            .catch((res) => {
              this.btnLoad = false;
              this.addResetMenuForm();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //编辑逻辑
    edit(id) {
      this.editMenuDialog = true;
      this.menuTypeDisableed = true;
      viewMenu(id)
        .then((response) => {
          this.editMenuForm = response.data;
        })
        .catch(() => {});
    },
    // 编辑重置表单
    editResetMenuForm() {
      this.editMenuForm = {
        menuId: 0,
        menuName: "",
        parentId: 0,
        sortNum: "",
        path: "",
        component: "",
        icon: "",
        menuType: 0,
        code: "",
      };
      this.editMenuDialog = false;
    },
    // 提交菜单编辑请求
    editMenuSubmit() {
      this.$refs.editMenuFormRef.validate((valid) => {
        if (valid) {
          this.btnLoad = true;
          // 新增菜单
          editMenu(this.editMenuForm)
            .then((response) => {
              this.btnLoad = false;
              this.editResetMenuForm();
              this.selectList();
            })
            .catch((res) => {
              this.btnLoad = false;
              this.editResetMenuForm();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    deleteRow(id) {
      this.$confirm(`确定要删除该菜单么？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteMenu(id)
            .then((resp) => {
              this.selectList();
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },

    selectOperationList(id) {
      this.loading = true;
      this.tableOperationData = [];
      operationList(id)
        .then((response) => {
          this.tableOperationData = response.data.rows;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //新增资源逻辑
    addOperation(id) {
      this.addResetOperationFormInit();
      this.addOperationForm.menuId = id;
      this.addOperationDialog = true;
    },
    addResetOperationFormInit() {
      this.addOperationForm = {
        menuId: 0,
        operationName: "",
        path: "",
        resultStruct: "",
        className: "",
        code: "",
      };
    },
    // 新增资源重置表单
    addResetOperationForm() {
      this.addResetOperationFormInit();
      this.addOperationDialog = false;
    },
    // 提交资源新增或编辑请求
    addOperationSubmit() {
      this.$refs.addOperationFormRef.validate((valid) => {
        if (valid) {
          this.btnLoad = true;
          // 新增资源
          addOperation(this.addOperationForm)
            .then((response) => {
              this.btnLoad = false;
              var menuId = this.addOperationForm.menuId;
              this.addResetOperationForm();
              this.selectOperationList(menuId);
            })
            .catch((res) => {
              this.btnLoad = false;
              this.addResetOperationForm();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //编辑逻辑
    editOperation(id) {
      this.editOperationDialog = true;
      viewOperation(id)
        .then((response) => {
          this.editOperationForm = response.data;
        })
        .catch(() => {});
    },
    // 编辑资源重置表单
    editResetOperationForm() {
      this.editOperationForm = {
        operationId: 0,
        menuId: "",
        operationName: "",
        path: "",
        resultStruct: "",
        className: "",
        code: "",
      };
      this.editOperationDialog = false;
    },
    // 提交资源编辑请求
    editOperationSubmit() {
      this.$refs.editOperationFormRef.validate((valid) => {
        if (valid) {
          this.btnLoad = true;
          // 新增资源
          editOperation(this.editOperationForm)
            .then((response) => {
              this.btnLoad = false;
              var menuId = this.editOperationForm.menuId;
              this.editResetOperationForm();
              this.selectOperationList(menuId);
            })
            .catch((res) => {
              this.btnLoad = false;
              this.editResetOperationForm();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除资源
    deleteOperationRow(id) {
      this.$confirm(`确定要删除该资源么？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteOperation(id)
            .then((resp) => {
              this.selectOperationList(id);
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },
    cleanCache() {
      cleanMenuRelationCache()
        .then((response) => {
          if (response.code === 200) {
            Message.success(response.message);
          }
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-div {
  display: flex;
  width: 100%;
  gap: 15px;
}
.operationIcon {
  margin-left: 10px;
}
</style>